<template>
	<view class="container">
		<view class="header">
			<view class="header-title">
				<view class="header-title-left">
					<view class="header-title-left-img"></view>
					<view class="header-title-left-title">
						向导服务
					</view>
					<view class="header-title-left-unit">
						<image src="/static/order/star-icon.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="header-list" v-for="(serveItem , index) in serveList" :key="index" @click="selectItem(index)"
				:class="{ 'selected': selectedIndex === index }">
				<view class="header-list-top">
					<view class="header-list-top-left">
						{{ serveItem.typeName }}
					</view>
					<view class="header-list-top-right">
						<image class="header-list-top-right-left" src="/static/order/unit.png" mode=""></image>
						<span class="header-list-top-right-middle">{{ serveItem.userMoney }}/</span>
						<span class="header-list-top-right-right">{{ serveItem.typeName == '定制攻略' ? '次' : '天'}}</span>
						<span class="header-list-top-right-right-common">起</span>
					</view>
				</view>
				<view class="header-list-bottom">
					{{ serveItem.description }}
				</view>
			</view>
		</view>

		<view class="date-select" v-if="preTitle == '预约地陪' || preTitle == '线上咨询'">
			<!-- 选择时间标题 -->
			<view class="date-select-header-title">
				<view class="date-select-header-title-left">
					<view class="date-select-header-title-left-img"></view>
					<view class="date-select-header-title-left-title">
						选择时间
					</view>
					<view class="date-select-header-title-left-unit">
						<image src="/static/order/star-icon.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 日期选择区域 -->
			<view class="date-picker">
				<!-- 选择日期 -->
				<view class="time-selection" @click="showCalendarPicker"
					v-if="selectedIndex == 0 || selectedIndex == 2">
					<text class="time-label">选择日期</text>
					<view class="time-info">
						<text class="time-value">{{ selectedDateText }}</text>
						<text class="time-desc" v-if="getSelectedDays() > 0">({{'共'+ getSelectedDays() }}天)</text>
						<u-icon name="arrow-right" color="rgba(77, 77, 86, 1)" size="13" bold></u-icon>
					</view>
				</view>

				<view class="time-selection" @click="showCompanionsPicker" v-if="preTitle == '预约地陪'">
					<text class="time-label">选择出行人数</text>
					<view class="time-info">
						<text class="time-value">{{ companionsCount }}人</text>
						<text class="time-desc" v-if="maxCompanionsCount > 0">(最多{{ maxCompanionsCount }}人)</text>
						<u-icon name="arrow-right" color="rgba(77, 77, 86, 1)" size="13" bold></u-icon>
					</view>
				</view>

				<!-- 日历组件 -->
				<u-calendar :show="showCalendar" @close="showCalendar=false" mode="range" @confirm="confirmCalendar"
					allowSameDay :min-date="minDate" :max-date="maxDate" :default-date="selectedDateRange"
					:disabled-date="disabledDate" :formatter="calendarFormatter">
				</u-calendar>
			</view>
		</view>

		<!-- 新增的底部按钮区域 -->
		<view class="bottom-bar">
			<view class="total-price">
				总计： <image class="total-price-img" src="/static/order/unit.png" mode=""></image><text
					class="price-number">{{ totalPrice }}</text>
			</view>
			<view class="confirm-button" @click="confirmOrder">
				确定
			</view>
		</view>

		<!-- 自定义出行人数选择器 -->
		<u-popup :show="showCompanionsPopup" mode="bottom" @close="closeCompanionsPopup" round="20rpx"
			:closeOnClickOverlay="true">
			<view class="custom-picker-container">
				<view class="picker-header">
					<text class="picker-cancel" @click="closeCompanionsPopup">取消</text>
					<text class="picker-title">选择出行人数</text>
					<text class="picker-confirm" @click="confirmCompanions">确定</text>
				</view>
				<view class="picker-tips" v-if="maxCompanionsCount > 0">
					向导设置的接单人数为{{ maxCompanionsCount }}人
				</view>
				<picker-view class="picker-view" :value="pickerValue" @change="bindCompanionsChange"
					indicator-style="height: 80rpx;">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in availableCompanionsRange" :key="index">
							{{ item }}人
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>

		<u-popup :show="selectPayMethods" @close="close" :closeOnClickOverlay="false" closeable round="40rpx">
			<view class="selectPayMethodsStyle">
				<!-- 顶部金额 -->
				<view class="amount-header">
					<image src="/static/order/money-icon-black.png" mode="" class="amount-icon"></image>
					<text class="amount-text">{{ finalPrice }}</text>
				</view>
				<u-divider lineColor="rgba(41, 41, 48, 0.05)" style="margin: 0;"></u-divider>
				<!-- 支付方式 -->
				<view class="payment-methods-title">
					支付方式
				</view>
				<view class="payment-methods">
					<view class="payment-item" @click="setPayment('微信支付')">
						<view class="payment-left">
							<image src="/static/order/wxzf.png" mode="" class="payment-icon"></image>
							<text class="payment-label">微信支付</text>
						</view>
						<view class="payment-right">
							<view class="radio-btn" :class="{ active: currentPayment === '微信支付' }">
								<u-icon v-if="currentPayment === '微信支付'" name="checkmark" color="#fff"
									size="18"></u-icon>
							</view>
						</view>
					</view>

					<view class="payment-item" @click="setPayment('支付宝支付')">
						<view class="payment-left">
							<image src="/static/order/zfbzf.png" mode="" class="payment-icon"></image>
							<text class="payment-label">支付宝支付</text>
						</view>
						<view class="payment-right">
							<view class="radio-btn" :class="{ active: currentPayment === '支付宝支付' }">
								<u-icon v-if="currentPayment === '支付宝支付'" name="checkmark" color="#fff"
									size="18"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<!-- 优惠信息 -->
				<view class="discount-info">
					<view class="discount-title">
						<view class="">本单可享</view>
						<view class="discount-title-right" v-if="useHoneyCoin">-{{ honeyCoinDiscount }}</view>
					</view>
					<view class="discount-content">
						<view class="discount-item">
							<view class="discount-name">蜂蜜币</view>
							<view class="discount-right">
								<view class="discount-desc">{{discountDesc }}</view>
								<view class="discount-value-right" @click="toggleCheckbox"
									:class="{ 'disabled': HoneyCoinBalance < 100 }">
									<view class="radio-btn"
										:class="{ active: useHoneyCoin, 'disabled': HoneyCoinBalance < 100 }">
										<u-icon v-if="useHoneyCoin" name="checkmark" color="#fff" size="18"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 立即支付按钮 -->
				<view class="pay-button">
					<button class="btn-pay" @click="confirmPay">立即支付</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		serviceTypeList,
		getTaskList,
		orders,
		getOrdersDateTimeById
	} from '@/request/api.js';
	export default {
		data() {
			const today = new Date();
			const year = today.getFullYear();
			const month = (today.getMonth() + 1).toString().padStart(2, '0');
			const day = today.getDate().toString().padStart(2, '0');
			const todayStr = `${year}-${month}-${day}`;

			// 计算最大日期（今天+30天）
			const maxDate = new Date();
			maxDate.setDate(today.getDate() + 30);
			const maxYear = maxDate.getFullYear();
			const maxMonth = (maxDate.getMonth() + 1).toString().padStart(2, '0');
			const maxDay = maxDate.getDate().toString().padStart(2, '0');
			const maxDateStr = `${maxYear}-${maxMonth}-${maxDay}`;

			return {
				serveList: [],
				selectedIndex: -1,
				// 日历组件相关数据
				showCalendar: false,
				minDate: todayStr,
				maxDate: maxDateStr,
				selectedDateRange: [], // 修改：取消默认选择，设为空数组
				companionsCount: 1, // 同行人数，默认1人
				companionsRange: Array.from({
					length: 20
				}, (v, i) => i + 1), // 1-20的数组
				selectPayMethods: false,
				currentPayment: '微信支付',
				useHoneyCoin: false,
				// 新增：后台返回的禁用日期数组
				disabledDates: [],
				guideUserId: null, //向导的id
				HoneyCoinBalance: 0, //蜂蜜币余额
				preTitle: '', //当前点击的服务标题
				// 新增：自定义选择器相关数据
				showCompanionsPopup: false,
				pickerValue: [0], // 默认选中第一个
				tempCompanionsCount: 1, // 临时存储选择的值
				maxCompanionsCount: 0, // 向导设置的接单人数限制
				companionsRange: [], // 初始为空数组，根据限制动态生成
			}
		},
		computed: {
			// 计算最终支付金额
			finalPrice() {
				const totalPrice = parseFloat(this.totalPrice) || 0;
				const discount = this.useHoneyCoin ? this.honeyCoinDiscount : 0;
				return (totalPrice - discount).toFixed(2);
			},
			// 显示选中的日期文本
			selectedDateText() {
				if (!this.selectedDateRange || this.selectedDateRange.length === 0) {
					return '请选择日期'; // 修改：未选择时显示提示文字
				}
				if (this.selectedDateRange.length === 1) {
					return this.formatDateDisplay(this.selectedDateRange[0]);
				}
				// 范围选择显示起止日期
				const startDate = this.formatDateDisplay(this.selectedDateRange[0]);
				const endDate = this.formatDateDisplay(this.selectedDateRange[this.selectedDateRange.length - 1]);
				return `${startDate}至${endDate}`;
			},
			// 计算总价
			totalPrice() {
				if (this.selectedIndex === -1) {
					return '0';
				}

				const selectedItem = this.serveList[this.selectedIndex];
				const days = this.getSelectedDays();

				if (selectedItem.typeName == '预约地陪' || selectedItem.typeName == '线上咨询') {
					// 地陪服务按天和同行人数计算价格
					// 基础价格 + 同行人数额外费用
					// 假设基础价格包含1人，额外人数需要加收费用
					const basePrice = parseFloat(selectedItem.userMoney);
					const companionPrice = parseFloat(selectedItem.companionPrice);

					// 总价格 = 基础价格 × 天数 + 额外人数 × 额外费用 × 天数
					const totalPrice = basePrice * days;
					// const totalPrice = basePrice * days + companionPrice * Math.max(0, this.companionsCount - 1) * days;

					return totalPrice.toFixed(2);
				} else {
					// 定制攻略按单计算价格
					return selectedItem.userMoney;
				}
			},
			// 支付弹框蜂蜜币
			discountDesc() {
				const total = this.HoneyCoinBalance ? this.HoneyCoinBalance : 0;

				if (total < 100) {
					// 少于100个，不可用
					return `共${total}个，本单不可用`;
				} else {
					// 计算最大可用数量（100的倍数，且不超过总数）
					const available = Math.floor(total / 100) * 100;
					return `共${total}个，本单可用${available}个`;
				}
			},
			honeyCoinDiscount() {
				const total = this.HoneyCoinBalance;
				const available = Math.floor(total / 100) * 100;
				return available / 100;
			},
			honeyMoney() {
				const total = this.HoneyCoinBalance;
				const available = Math.floor(total / 100) * 100;
				return available;
			},
			availableCompanionsRange() {
				if (this.maxCompanionsCount > 0) {
					// 如果有最大人数限制，只生成1到最大限制的人数
					return Array.from({
						length: this.maxCompanionsCount
					}, (v, i) => i + 1);
				} else {
					// 如果没有限制，默认生成1-20人
					return Array.from({
						length: 20
					}, (v, i) => i + 1);
				}
			}
		},
		// 在组件创建时设置默认值
		onLoad(option) {
			this.guideUserId = ''
			this.preTitle = ''
			// 参数验证和初始化
			if (!option || !option.userId) {
				console.error('缺少必要的用户ID参数');
				return;
			}

			this.guideUserId = option.userId;
			this.preTitle = option.title
			// 并行初始化页面数据
			Promise.all([
				this.initPageData(option.userId), //获取向导已开通服务列表
				this.fetchDisabledDates() //从后台获取禁用日期数据
			]).then(() => {
				console.log('页面数据初始化完成');
				console.log('禁用日期数据:', this.disabledDates);
				this.resetSelections(); //初始化页面参数
			}).catch(error => {
				console.error('页面初始化失败:', error);
			});
		},
		methods: {
			// 获取向导服务列表
			initPageData(userId) {
				this.serveList = []
				let params = {
					userId,
				}
				return serviceTypeList(params).then(res => {
					if (res.data.code == 200) {
						let serverList = res.data.rows
						if (serverList && serverList.length > 0) {
							// 根据 preTitle 过滤服务列表
							if (this.preTitle) {
								// 只显示与 preTitle 匹配的服务
								const filteredList = serverList.filter(item => item.typeName === this.preTitle);
								if (filteredList.length > 0) {
									this.serveList = filteredList;
									// 自动选中第一个（也是唯一一个）服务
									this.selectedIndex = 0;
									// 设置接单人数限制
									this.setMaxCompanionsCount();
									console.log(`自动选中服务: ${this.preTitle}`);
								} else {
									// 如果没有找到匹配的服务，显示所有服务
									this.serveList = serverList;
									console.warn(`未找到匹配的服务: ${this.preTitle}，显示所有服务`);
								}
							} else {
								// 如果没有 preTitle，显示所有服务
								this.serveList = serverList;
							}
						}
					}
					return res;
				}).catch(err => {
					console.error('获取服务类型列表失败:', err)
					throw err;
				})
			},
			// 设置接单人数限制
			setMaxCompanionsCount() {
				if (this.selectedIndex !== -1) {
					const selectedItem = this.serveList[this.selectedIndex];
					if (selectedItem && selectedItem.typeName == '预约地陪') {
						this.maxCompanionsCount = selectedItem.userCount || 0;
						console.log('向导设置的接单人数限制:', this.maxCompanionsCount);

						// 动态生成可选的人数范围
						if (this.maxCompanionsCount > 0) {
							this.companionsRange = Array.from({
								length: this.maxCompanionsCount
							}, (v, i) => i + 1);
						} else {
							this.companionsRange = Array.from({
								length: 20
							}, (v, i) => i + 1);
						}

						// 如果当前选择的人数超过限制，自动调整为最大限制人数
						if (this.companionsCount > this.maxCompanionsCount && this.maxCompanionsCount > 0) {
							this.companionsCount = this.maxCompanionsCount;
						}
					} else {
						this.maxCompanionsCount = 0; // 非地陪服务无限制
						this.companionsRange = Array.from({
							length: 20
						}, (v, i) => i + 1);
					}
				}
			},
			// 新增：禁用日期判断函数
			disabledDate(date) {
				// 将日期格式化为 YYYY-MM-DD 格式进行比较
				const dateStr = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;

				// 检查是否在禁用日期列表中
				const isDisabled = this.disabledDates.includes(dateStr);
				console.log('日期检查:', dateStr, '是否禁用:', isDisabled);

				return isDisabled;
			},

			calendarFormatter(day) {
				// 直接使用 day 对象中的年月日属性
				const currentDate =
					`${day.date.getFullYear()}-${String(day.date.getMonth() + 1).padStart(2, '0')}-${String(day.day).padStart(2, '0')}`;
				if (this.disabledDates.includes(currentDate)) {
					day.bottomInfo = '不可选';
					day.dot = true;
					day.disabled = true;
				}

				return day;
			},

			// 新增：模拟从后台获取禁用日期数据
			async fetchDisabledDates() {
				try {
					let params = {
						serviceProviderId: this.guideUserId
					}
					getOrdersDateTimeById(params).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							this.disabledDates = res.data.data.map(item => {
								const date = new Date(item);
								const year = date.getFullYear();
								const month = String(date.getMonth() + 1).padStart(2, '0');
								const day = String(date.getDate()).padStart(2, '0');
								return `${year}-${month}-${day}`;
							});
						}
					})
					console.log('禁用日期数据已加载:', this.disabledDates);
				} catch (error) {
					console.error('获取禁用日期失败:', error);
					uni.showToast({
						title: '获取日期信息失败',
						icon: 'none'
					});
				}
			},

			// 显示自定义出行人数选择器
			showCompanionsPicker() {
				this.tempCompanionsCount = this.companionsCount;
				// 确保当前选择在有效范围内
				if (this.tempCompanionsCount < 1) {
					this.tempCompanionsCount = 1;
				}
				if (this.maxCompanionsCount > 0 && this.tempCompanionsCount > this.maxCompanionsCount) {
					this.tempCompanionsCount = this.maxCompanionsCount;
				}

				// 找到当前值在数组中的索引
				const index = this.availableCompanionsRange.indexOf(this.tempCompanionsCount);
				this.pickerValue = [index >= 0 ? index : 0];
				this.showCompanionsPopup = true;
			},

			// 关闭出行人数选择器
			closeCompanionsPopup() {
				this.showCompanionsPopup = false;
			},

			// 选择器值变化
			bindCompanionsChange(e) {
				const value = e.detail.value[0];
				this.tempCompanionsCount = this.availableCompanionsRange[value];
			},

			// 确认选择出行人数
			confirmCompanions() {
				this.companionsCount = this.tempCompanionsCount;
				this.showCompanionsPopup = false;
			},

			// 计算选中的天数
			getSelectedDays() {
				if (!this.selectedDateRange || this.selectedDateRange.length === 0) {
					return 0;
				}

				if (this.selectedDateRange.length === 1) {
					return 1;
				} else {
					// 计算日期范围内的天数
					const startDate = new Date(this.selectedDateRange[0]);
					const endDate = new Date(this.selectedDateRange[this.selectedDateRange.length - 1]);
					const timeDiff = endDate.getTime() - startDate.getTime();
					return Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
				}
			},
			// 选择服务项目
			selectItem(index) {
				this.selectedIndex = index;
				// 更新接单人数限制
				this.setMaxCompanionsCount();
				// 初始化所有选择状态
				this.resetSelections();
			},

			// 重置所有选择状态
			resetSelections() {
				// 重置日期选择，默认选中明天
				this.selectedDateRange = [];
			},

			// 显示日历选择器
			showCalendarPicker() {
				this.showCalendar = true;
			},

			// 日历确认选择 - 添加验证逻辑
			confirmCalendar(e) {
				// 检查选中的日期是否包含禁用日期
				let hasDisabledDate = false;
				let disabledDatesFound = [];

				e.forEach(date => {
					if (this.disabledDates.includes(date)) {
						hasDisabledDate = true;
						disabledDatesFound.push(date);
					}
				});

				if (hasDisabledDate) {
					uni.showToast({
						title: `选择的日期 ${disabledDatesFound.join(', ')} 不可用`,
						icon: 'none',
						duration: 3000
					});
					return;
				}

				this.showCalendar = false;
				this.selectedDateRange = e;
				console.log('选择的日期范围:', e);
			},

			// 格式化日期显示
			formatDateDisplay(dateStr) {
				const date = new Date(dateStr);
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${month}月${day}日`;
			},

			confirmOrder() {
				if (this.selectedIndex === -1) {
					uni.showToast({
						title: '请选择服务',
						icon: 'none'
					});
					return;
				}

				// 验证必填项
				if ((this.preTitle == '预约地陪' || this.preTitle == '线上咨询') && this.selectedDateRange.length === 0) {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					});
					return;
				}

				// 验证选择的日期是否包含禁用日期
				if (this.preTitle == '预约地陪' || this.preTitle == '线上咨询') {
					let hasDisabledDate = false;
					this.selectedDateRange.forEach(date => {
						if (this.disabledDates.includes(date)) {
							hasDisabledDate = true;
						}
					});

					if (hasDisabledDate) {
						uni.showToast({
							title: '选择的日期中包含不可用日期，请重新选择',
							icon: 'none',
							duration: 3000
						});
						return;
					}
				}

				// 验证出行人数是否超出限制
				const selectedItem = this.serveList[this.selectedIndex];
				if (selectedItem.typeName == '预约地陪') {
					if (this.companionsCount > this.maxCompanionsCount) {
						uni.showToast({
							title: `超出向导接单人数限制（最多${this.maxCompanionsCount}人）`,
							icon: 'none',
							duration: 3000
						});
						return
					}
				}
				// 弹窗打开的之前需要获取用户蜂蜜币余额，获取到了再打开
				this.getTaskListCenter()
			},
			getTaskListCenter() {
				let params = {
					userId: this.$store.state.userInfo.userId,
				}

				getTaskList(params).then(res => {
					if (res.data.code == 200) {
						// 弹窗打开的之前需要获取用户蜂蜜币余额，获取到了再打开
						this.selectPayMethods = true;
						this.HoneyCoinBalance = res.data.data.honeySum
					}
				})

			},
			close() {
				this.selectPayMethods = false;
			},

			setPayment(type) {
				this.currentPayment = type;
			},

			confirmPay() {
				const selectedItem = this.serveList[this.selectedIndex];

				// 构建基础参数
				const params = {
					serviceType: selectedItem.typeName, // 服务类型
					totalAmount: this.finalPrice, // 支付总金额
					honeyMoney: this.useHoneyCoin && this.honeyMoney > 0 ? this.honeyMoney : 0,
					customerId: this.$store.state.userInfo.userId,
					serviceProviderId: this.guideUserId,
					payType: this.currentPayment,
				};

				// 根据服务类型处理特殊逻辑
				switch (selectedItem.typeName) {
					case '预约地陪':
						params.startTime = this.selectedDateRange[0];
						params.endTime = this.selectedDateRange[this.selectedDateRange.length - 1];
						params.companionsCount = this.companionsCount; // 出行人数（包含自己）
						break;

					case '线上咨询':
						params.startTime = this.selectedDateRange[0];
						params.endTime = this.selectedDateRange[this.selectedDateRange.length - 1];
						break;

					case '定制攻略':
						// 定制攻略暂无特殊参数
						break;
				}
				orders(params).then(res => {
					if (res.data.code == 200) {
						this.selectPayMethods = false;
						uni.showToast({
							title: '下单成功',
							icon: 'none',
							duration: 2000 // 设置为2000ms，与延迟时间保持一致
						});

						// 2秒后返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000 // 设置为2000ms，与延迟时间保持一致
						});
					}
				})
			},

			toggleCheckbox() {
				// 如果蜂蜜币不足100，直接返回，不执行切换
				if (this.HoneyCoinBalance < 100) {
					return;
				}
				this.useHoneyCoin = !this.useHoneyCoin;
			}
		},

	}
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	page {
		background-color: #f8f8f8;
	}

	.container {
		.header {
			margin: 40rpx 30rpx;
			padding-bottom: 1rpx;
			background-image: url('/static/order/order-header-backImg.png');
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 20rpx;
			background-color: #fff;

			.header-title {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 20rpx;

				.header-title-left {
					display: flex;
					align-items: center;

					.header-title-left-img {
						width: 8rpx;
						height: 24rpx;
						background-color: rgba(254, 113, 49, 1);
						margin-right: 10rpx;
					}

					.header-title-left-title {
						font-size: 36rpx;
						font-weight: bold;
						line-height: 36rpx;
					}

					.header-title-left-unit {
						width: 40rpx;
						height: 40rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.header-title-right {
					font-size: 30rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: rgba(254, 113, 49, 1);
				}
			}

			.header-list {
				border: 1px solid rgba(240, 239, 239, 1);
				height: 160rpx;
				margin: 0 20rpx 40rpx;
				border-radius: 20rpx;
				padding-bottom: 20rpx;

				&.selected {
					background-color: rgba(255, 243, 238, 1);
					box-shadow: 0 0 16rpx 6rpx rgba(255, 207, 164, 1);
					border: 1px solid rgba(255, 243, 238, 1);
				}

				.header-list-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;

					.header-list-top-left {
						font-size: 30rpx;
						font-weight: 400;
						line-height: 30rpx;
					}

					.header-list-top-right {
						color: rgba(254, 113, 49, 1);

						.header-list-top-right-left {
							width: 24rpx;
							height: 24rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.header-list-top-right-middle {
						color: rgba(254, 113, 49, 1);
						font-size: 36rpx;
						line-height: 36rpx;
					}

					.header-list-top-right-right-common {
						font-size: 20rpx;
						font-weight: 400;
						line-height: 36rpx;
						color: rgba(77, 77, 86, 1);
					}
				}

				.header-list-bottom {
					padding: 0 20rpx 20rpx;
					font-size: 26rpx;
					color: rgba(246, 107, 47, 1);
				}
			}
		}

		.date-select {
			margin: 0 30rpx;
			padding-bottom: 20rpx;
			border-radius: 20rpx;
			background-image: url('/static/order/order-header-backImg.png');
			background-size: cover;
			background-color: #fff;

			.date-select-header-title {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 20rpx;

				.date-select-header-title-left {
					display: flex;
					align-items: center;

					.date-select-header-title-left-img {
						width: 8rpx;
						height: 24rpx;
						background-color: rgba(254, 113, 49, 1);
						margin-right: 10rpx;
					}

					.date-select-header-title-left-title {
						font-size: 36rpx;
						font-weight: bold;
						line-height: 36rpx;
					}

					.date-select-header-title-left-unit {
						width: 40rpx;
						height: 40rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.date-picker {
			padding: 0 20rpx;

			.time-selection {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				background-color: #fff;
				border-radius: 10rpx;
				cursor: pointer;
				transition: all 0.3s ease;

				.time-label {
					font-size: 28rpx;
					color: #333;
				}

				.time-info {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #666;

					.time-value {
						color: #333;
						font-weight: 500;
					}

					.time-desc {
						color: #ff9a4d;
						margin: 0 10rpx;
						font-size: 24rpx;
					}

					.arrow {
						color: #999;
						margin-left: 10rpx;
					}
				}
			}
		}

		/* 新增的底部按钮样式 */
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 30rpx 30rpx 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 999;

			.total-price {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;

				.total-price-img {
					width: 24rpx;
					height: 24rpx;
				}

				.price-number {
					color: #ff6b00;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.confirm-button {
				width: 160rpx;
				height: 60rpx;
				background-color: #ff6b00;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				cursor: pointer;

				&:active {
					background-color: #e65a00;
				}
			}
		}

		/* 自定义选择器样式 */
		.custom-picker-container {
			height: 550rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.picker-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.picker-cancel,
				.picker-confirm {
					font-size: 32rpx;
					color: #666;
				}

				.picker-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}

				.picker-confirm {
					color: #ff6b00;
				}
			}

			.picker-tips {
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				color: #ff6b00;
				text-align: center;
				background-color: #fff9f5;
				border-bottom: 1rpx solid #fff0e6;
			}

			.picker-view {
				height: 400rpx;

				.picker-item {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.selectPayMethodsStyle {
		border-radius: 20rpx;

		.amount-header {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 60rpx;
			font-weight: bold;
			color: #000;
			margin: 40rpx 0;

			.amount-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			.amount-text {
				font-size: 60rpx;
			}
		}

		.payment-methods-title {
			font-size: 36rpx;
			font-weight: bold;
			padding: 30rpx 30rpx 40rpx;
		}

		.payment-methods {
			padding: 0 30rpx;

			.payment-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.payment-left {
					display: flex;
					align-items: center;

					.payment-icon {
						width: 70rpx;
						height: 70rpx;
						margin-right: 15rpx;
					}

					.payment-label {
						font-size: 32rpx;
						color: #333;
					}
				}

				.payment-right {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					display: flex;
					align-items: center;
					justify-content: center;

					.radio-btn {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						transition: all 0.3s ease;
						padding: 2rpx;

						&.active {
							background-color: #ff9a4d;
							border-color: #ff9a4d;
						}
					}
				}
			}
		}

		.line {
			background-color: rgba(248, 248, 248, 1);
			height: 20rpx;
		}

		.discount-info {
			padding: 40rpx 30rpx;

			.discount-title {
				font-size: 32rpx;
				line-height: 32rpx;
				color: rgba(41, 41, 48, 1);
				margin-bottom: 20rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;

				.discount-title-right {
					font-size: 30rpx;
					color: rgba(254, 113, 49, 1);
				}
			}

			.discount-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 10rpx;

				.discount-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 1;

					.discount-name {
						font-size: 28rpx;
						color: #333;
						margin-right: 20rpx;
					}

					.discount-right {
						display: flex;

						.discount-desc {
							font-size: 24rpx;
							color: #ff9a4d;
							margin-right: 20rpx;
						}

						.discount-value-right {
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
							border: 2rpx solid #ccc;
							display: flex;
							align-items: center;
							justify-content: center;

							// 添加禁用状态
							&.disabled {
								opacity: 0.5;
								pointer-events: none; // 禁止点击事件
							}

							.radio-btn {
								width: 100%;
								height: 100%;
								border-radius: 50%;
								transition: all 0.3s ease;
								padding: 2rpx;

								&.active {
									background-color: #ff9a4d;
									border-color: #ff9a4d;
								}

								// 添加禁用状态
								&.disabled {
									background-color: #ccc;
									border-color: #ccc;
								}
							}
						}
					}

				}
			}
		}

		.pay-button {
			margin-bottom: 30rpx;
			display: flex;
			justify-content: center;

			.btn-pay {
				width: 400rpx;
				height: 80rpx;
				background-color: #ff9a4d;
				border-radius: 40rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 80rpx;
				border: none;
				outline: none;
			}
		}
	}
</style>